import { observer } from "Mobx-react";
import { Form, Radio, Checkbox } from "antd";
import { typeEnum } from "../../assets/common/enums";
import type { questionType } from "../../types";
import SliderItem from "../SliderItem/SliderItem";
import { MatrixContent } from "./style";

function MatrixItem({ question, rules = [] }: { question: questionType; formState?: any; rules?: any }) {
  return (
    <MatrixContent>
      <div className="matrix-option-list">
        {question.option.map(item => {
          return (
            <div className="matrix-option-item" key={item.id}>
              {item.content}
            </div>
          );
        })}
      </div>
      {question.children &&
        question.children.map(item => {
          return (
            <Form.Item key={item.id} label={item.title} name={item.id} rules={rules}>
              {item.type === typeEnum.MATRIX_RADIO ? (
                <Radio.Group className="matrix-question-list">
                  {item.option.map(subItem => (
                    <Radio className="flex item-option" key={subItem.id} value={subItem.id}></Radio>
                  ))}
                </Radio.Group>
              ) : item.type === typeEnum.MATRIX_CHECKBOX ? (
                <Checkbox.Group className="matrix-question-list">
                  {item.option.map(subItem => (
                    <Checkbox className="flex item-option" key={subItem.id} value={subItem.id}></Checkbox>
                  ))}
                </Checkbox.Group>
              ) : (
                <SliderItem option={question.option} textShow={false} disabled={false}></SliderItem>
              )}
            </Form.Item>
          );
        })}
    </MatrixContent>
  );
}
export default observer(MatrixItem);
